<template>
	<div style="height: 100%;">
		<div style="font-size: 20px;font-weight: bold;text-align: center;margin-bottom: 20px;color: #999;">
			{{leftSelectItem.title}}
		</div>
		<div v-if="tableData.list && tableData.list.length > 0">
			<div style="display: flex;align-items: center;justify-content: space-between;padding: 20px 10px;">
				<div style="font-size: 13px;color: #333;">{{params.dateStr.getFullYear()}}年度</div>
				<el-date-picker v-model="params.dateStr" type="year" placeholder="选择年" size="mini"
					@change="pageDocumentEntCategoryDraft()" style="width: 100px;">
				</el-date-picker>
			</div>
			<el-table :data="tableData.list" style="width:100%" border>
				<el-table-column prop="draftTime" label="时间">
					<template scope="scope">
						{{scope.row.draftTime.split(' ')[0]}}
					</template>
				</el-table-column>
				<el-table-column prop="draftNo" label="联单号"></el-table-column>
				<el-table-column prop="disposeEntName" label="处置单位名称"></el-table-column>
				<el-table-column width="120" label="操作">
					<template scope="scope">
						<el-button type="text" @click="previewFile(scope.row)">查看</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div v-show="tableData.list&&tableData.list.length>0" align="right" style="margin-top: 10px">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page.sync="tableData.pageIndex" :page-sizes="[10,20,30,50]" :page-size="tableData.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="tableData.total">
				</el-pagination>
			</div>
		</div>
		<div v-else style="text-align: center;">
			<img src="@/assets/bIcon7.png" style="width: 70px;height: 70px;margin-top: 200px;" />
			<div style="font-weight: bold;font-size: 20px;margin-top: 10px;color: #999999;">
				暂无文件
			</div>
		</div>

		<el-dialog :visible.sync="visible1" width="800px" :title="'文件预览'">
			<pdf ref="pdf" v-if="pdfUrl" :src="pdfUrl" v-for="(page,index) in numPages" :page="page" />
		</el-dialog>

		<div style="position: fixed;right: 50px;top: 40%;font-weight: bold;color: #333;">
			<div @click="uploadInfo('add')" class="rightButton">
				<img src="@/assets/sIcon24.png" style="width: 60px;height: 34px;" />
				<div>更新</div>
			</div>

			<div @click="showBeizhu" class="rightButton">
				<img src="@/assets/sIcon25.png" style="width: 60px;height: 34px;" />
				<div>评价</div>
			</div>

			<div @click="uploadInfo('edit')" class="rightButton" v-if="leftSelectItem.categoryType == 'COMMON'">
				<img src="@/assets/sIcon26.png" style="width: 60px;height: 34px;" />
				<div>修改</div>
			</div>
		</div>

		<!--备注-->
		<questions ref="questions" :categoryItemId="leftSelectItem.id" :documentId="documentId" @close="closeDia">
		</questions>


		<!--历史版本-->
		<el-dialog :visible.sync="tableData2.visible" width="1200px" :title="leftSelectItem.title+'的文件列表'">
			<el-table :data="tableData2.list" border style="width:100%">
				<el-table-column prop="title" label="标题"></el-table-column>
				<el-table-column prop="remark" label="备注"></el-table-column>
				<el-table-column prop="statusStr" label="状态"></el-table-column>
				<el-table-column prop="receiveTime" label="领取时间">
					<template scope="scope">
						<span>{{scope.row.receiveTime.split(" ")[0]}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="endTime" label="截止时间"></el-table-column>
				<el-table-column prop="createTime" label="创建时间"></el-table-column>
				<el-table-column width="120" label="操作">
					<template scope="scope">
						<el-button type="text" @click="previewFile(scope.row)">查看</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div v-show="tableData2.list&&tableData2.list.length>0" align="right" style="margin-top: 10px">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page.sync="tableData2.pageIndex" :page-sizes="[10,20,30,50]" :page-size="tableData2.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="tableData2.total">
				</el-pagination>
			</div>
		</el-dialog>

	</div>
</template>

<script>
	import pdf from 'vue-pdf'
	import questions from '@/components/view/questions'

	let that
	export default {
		name: 'ldView',
		components: {
			pdf,
			questions
		},
		props: ['leftSelectItem'],
		data() {
			return {
				visible1: false,
				fileViewUrl: this.baseURL +
					'wfbb-webupload/service/sys/file/upload/view?appKey=5da5441f62e48aedc7a3853ffc75c2db&prodID=gf&fileID=',
				params: {
					facilitatorId: '',
					categoryMainId: '',
					ticketId: '',
					itemId: '',
					dateStr: new Date(),
				},
				tableData: {
					total: 0,
					pageIndex: 1,
					pageSize: 20,
					list: []
				},
				pdfUrl: '',
				numPages: 1,
				visible4: false,
				tableData2: {
					visible: false,
					total: 0,
					pageIndex: 1,
					pageSize: 20,
					list: []
				},
				documentId: ''
			}
		},
		created: function() {},
		mounted: function() {
			that = this
			that.params.categoryMainId = that.getQueryString("categoryMainId")
			that.params.ticketId = that.$store.state.token
			that.params.itemId = that.getQueryString("itemId")


			that.pageDocumentEntCategoryDraft()
		},

		methods: {

			handleSizeChange: function(val) {
				this.tableData2.pageIndex = 1;
				this.tableData2.pageSize = val;
				this.getHistory();
			},

			handleCurrentChange: function(val) {
				this.tableData2.pageIndex = val;
				this.getHistory();
			},

			//历史版本点击
			getHistory() {
				const _this = this;
				that.ajax({
					url: '/document/pageDocumentEntCategoryRecord?ticketId=' + that.params.ticketId +
						'&pageIndex=' + that.tableData2.pageIndex + '&pageSize=' + that.tableData2.pageSize,
					data: JSON.stringify({
						facilitatorId: that.params.facilitatorId,
						categoryItemId: that.leftSelectItem.id,
					}),
					contentType: 'application/json',
					dataType: 'json',
					type: 'POST',
					success: function(result) {
						if (result.status == 1) {
							_this.tableData2.list = result.data.records;
							_this.tableData2.total = result.data.total;
						} else {
							that.$message(result.infoList[0], {
								status: 'info',
								timeout: 2500
							});
						}
					}
				});
			},

			//上传点击
			uploadInfo(optionType) {
				that.$emit("uploadInfo", optionType)
			},

			closeDia() {
				that.$emit("closeDia", true)
			},


			//备注点击			
			showBeizhu() {
				if (that.tableData.list.length == 0) {
					return that.$message({
						message: '暂未上传文件',
						type: 'warning'
					});
				}
				that.$refs.questions.open()
			},

			//保存备注		
			saveBeizhu() {
				let thisParams = {
					facilitatorId: that.params.facilitatorId,
					categoryItemId: that.leftSelectItem.id,
					remark: that.params2.remark,
					isQualified: that.params2.isQualified == '1' ? true : false,
				}
				if (that.params2.id) thisParams.id = that.params2.id
				that.ajax({
					url: '/document/saveOrUpdateDocumentEntCategoryComments?ticketId=' + that.params
						.ticketId,
					data: JSON.stringify(thisParams),
					contentType: 'application/json',
					dataType: 'json',
					method: 'POST',
					success: function(result) {
						if (result.data) {
							that.$emit("saveBeizhu", true)
							that.closeDia()
							return that.$message({
								message: '成功',
								type: 'success'
							});
						}
					},
				})
			},

			previewFile(item) {
				that.visible1 = true
				that.pdfUrl = pdf.createLoadingTask(that.fileViewUrl + item.fileId)
				that.pdfUrl.promise.then(pdf => {
					console.log(pdf)
					that.numPages = pdf.numPages // 这里拿到当前pdf总页数
					//loading.close();
				})
			},

			handleSizeChange: function(val) {
				this.tableData.pageIndex = 1;
				this.tableData.pageSize = val;
				this.pageDocumentEntCategoryDraft();
			},
			handleCurrentChange: function(val) {
				this.tableData.pageIndex = val;
				this.pageDocumentEntCategoryDraft();
			},

			//获取转移联单列表
			pageDocumentEntCategoryDraft() {
				that.ajax({
					url: '/documentDraft/pageDocumentEntCategoryDraft?ticketId=' + that.params.ticketId +
						'&pageIndex=' +
						that.tableData.pageIndex + '&pageSize=' + that.tableData.pageSize,
					data: JSON.stringify({
						facilitatorId: that.params.facilitatorId,
						categoryItemId: that.leftSelectItem.id,
						dateStr: that.params.dateStr.getFullYear()
					}),
					contentType: 'application/json',
					dataType: 'json',
					method: 'POST',
					success: function(result) {
						if (result.status == 1) {
							that.tableData.total = result.data.total
							that.tableData.list = result.data.records
							that.$forceUpdate()
						}
					}
				});
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>